<template>
	<view style="display: flex;">
		
	
  <view class="keyboard">
    <!-- 遍历keys数组中的每个元素，为每个键创建一个按钮 -->
    <button
      v-for="(key, index) in keys"
      :key="index"
      class="key"
      @click="onKeyClick(key)"
    >
      {{ key }}
    </button>
  </view>
  
  <view class="keyboard1">
	<u-button type="primary" text="∨"  @click="onKeyClick('∨')"></u-button>
	<u-button type="primary" text="×"  @click="onKeyClick('×')"></u-button>
	<u-button type="primary" text="确定" :disabled="disa"  @click="onKeyClick('确定')"></u-button>
  </view>
  </view>
</template>

<script>
export default {
  name: 'Keyboard',
  data() {
  	return {
		disa: true,
		index: 1
  	}
  },
  props: {
    keys: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onKeyClick(key) {
      // 当按钮被点击时，发射一个事件，携带被点击的键的值
      this.$emit('keyClicked', key);
    },
	buttonStatus(status) {
		this.disa = status
	}
  }
};
</script>

<style scoped>
.keyboard {
  display: grid; /* 使用grid布局 */
  grid-template-columns: repeat(8, 1fr); /* 创建8列，每列的大小相同 */
  gap: 10px; /* 按钮之间的间隔 */
  padding: 15px 10px;
}

.keyboard1 {
  display: grid; /* 使用grid布局 */
  grid-template-columns: repeat(1, 1fr); /* 创建8列，每列的大小相同 */
  gap: 10px; /* 按钮之间的间隔 */
  padding: 15px 10px;
}


.key {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  aspect-ratio: 1 / 1; /* 设置宽高比，保证按钮不变形 */
  width: 100%; /* 按钮占满单元格宽度 */
  padding: 10px; /* 按钮内边距 */
  text-align: center; /* 文字居中 */
  user-select: none; /* 防止用户选中文字 */
  /* 可以在这里添加更多的按钮样式 */
}

.key1 {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  aspect-ratio: 1 / 1; /* 设置宽高比，保证按钮不变形 */
  width: 100%; /* 按钮占满单元格宽度 */
  padding: 10px; /* 按钮内边距 */
  text-align: center; /* 文字居中 */
  user-select: none; /* 防止用户选中文字 */
  /* 可以在这里添加更多的按钮样式 */
}

</style>
